<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  <title>Document</title>

  <style>
    #yiJianBaoShuiBtn {
      position: absolute;
      right: 0;
      top: 100px;
      width: 94px;
      height: 86px;
      cursor: pointer;
    }

    #yiJianBaoShuiBtn img {
      width: 100%;
    }

    .yijianbaoshui {
      position: absolute;
      right: 0;
      top: 220px;
      width: 0;
      max-height: 560px;
      background: #ddd;
      transition: all linear .5s;
      overflow: hidden;
      box-sizing: border-box;
      background: #fff;
    }

    .yijianbaoshui-active {
      /* transform: translateX(-100%); */
      width: 415px;
    }

    .yijianbaoshui-item {
      width: 361px;
      display: flex;
      align-items: center;
      white-space: nowrap;
      padding-bottom: 20px;
      font-size: 14px;
      color: rgba(0, 0, 0, 1);
    }

    .yijianbaoshui-main {
      padding: 30px 22px 30px 30px;
      border: 1px solid #ddd;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
    }

    .yijianbaoshui-item_one {
      width: 84px;
      color: rgba(112, 112, 112, 1);
    }

    .yijianbaoshui-item_two {
      flex: 1;
      display: flex;
      align-items: center;
    }

    .yijianbaoshui-item-time {
      flex: 1;
      border: 1px solid #C0C4CC;
      border-radius: 5px;
      height: 28px;
      display: flex;
      align-items: center;

    }

    .input-period-time {
      border: none;
      padding: 0;
      margin: 0;
      list-style: none;
      outline: none;
      width: 120px;
      padding-left: 10px;
    }

    .report-select {
      padding: 0;
      margin: 0;
      list-style: none;
      outline: none;
      width: 100%;
      height: 30px;
      border: 1px solid #C0C4CC;
      border-radius: 5px;
    }

    .yijianbaoshui-tax-type {
      align-items: flex-start;
    }

    .tax-type-ul {
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .tax-type-ul>li {
      flex: 1;
      display: flex;
      align-items: center;
      padding-bottom: 6px;
    }

    .tax-type-li>span {
      background: #2E98FA;
      width: 4px;
      height: 4px;
      margin-right: 6px;
      border-radius: 2px;
      overflow: hidden;
    }

    .tax-type-li-c {
      padding-left: 10px;
      color: #666666;
    }

    .tax-type-li-c>label {
      width: 40px;
      height: 18px;
      border-radius: 9px;
    }

    .yijianbaoshui-radio {
      display: none;
    }

    .yijianbaoshui-radio-icon {
      width: 40px;
      height: 18px;
      border-radius: 9px;
      background: #E4E7ED;
      margin-left: 6px;
      cursor: pointer;
    }
    .yijianbaoshui-radio-icon::before {
      content: '';
      display: block;
      background: #fff;
      border-radius: 50%;
      width: 12px;
      height: 12px;
      position: relative;
      top: 3px;
      left: 3px;
      transition: all linear .3s;
    }
    .yijianbaoshui-radio-icon-select {
      background: #2E98FA !important;
    }
    .yijianbaoshui-radio-icon-select::before {
      left: 24px;
    }
    .classyijianbanshui-btn {
      width: 361px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-around;
      padding-top: 35px;
    }
    .classyijianbanshui-btn > div {
      margin-bottom: 14px;
      width: 128px;
      height: 34px;
      border-radius: 17px;
      text-align: center;
      line-height: 32px;
      box-sizing: border-box;
      cursor: pointer;
    }
    .classyijianbanshui-btn-item {
      border: 1px solid #2E98FA;
      color: #2E98FA;
    }
    .classyijianbanshui-btn-item:hover {
      background: #ECF6FF;
    }
    .classyijianbanshui-btn-item-complete {
      border: 1px solid #13CE67;
      color: #13CE67;
    }
    .classyijianbanshui-btn-item-complete:hover {
      background: #E6FFF1;
    }
  </style>
</head>

<body>
  <div>
    <!-- 按钮 -->
    <div id="yiJianBaoShuiBtn">
      <img src="./clickBtn.png" alt="">
    </div>
    <!-- popup -->
    <div id="yiJianBaoShuiPopup" class="yijianbaoshui yijianbaoshui-active">
      <div class="yijianbaoshui-main">
        <div class="yijianbaoshui-item">
          <span class="yijianbaoshui-item_one">版本号： </span>
          <span>1.8.3</span>
        </div>
        <div class="yijianbaoshui-item">
          <span class="yijianbaoshui-item_one">会计制度：</span>
          <span>小企业会计准则</span>
        </div>
        <div class="yijianbaoshui-item">
          <span class="yijianbaoshui-item_one">纳税人类型： </span>
          <span>小规模纳税人</span>
        </div>
        <div class="yijianbaoshui-item">
          <span class="yijianbaoshui-item_one">申报方式： </span>
          <span class="yijianbaoshui-item_two">
            一键申报
          </span>
        </div>
        <div class="yijianbaoshui-item">
          <span class="yijianbaoshui-item_one">申报周期： </span>
          <span class="yijianbaoshui-item-time">
            <input class="input-period-time" type="month" id="period-start" value="2019年1月">
            <span>至</span>
            <input class="input-period-time" type="month" id="period-end" value="2019年1月">
          </span>
        </div>
        <div class="yijianbaoshui-item yijianbaoshui-tax-type">
          <span class="yijianbaoshui-item_one">报表类型： </span>
          <div class="yijianbaoshui-item_two" id="tax-type">
            <ul class="tax-type-ul">
              <li class="tax-type-li"> <span></span> 资产负债表</li>
              <li class="tax-type-li-c">重分类
                <div class="yijianbaoshui-radio-icon" id="tax"></div>
              </li>
              <li class="tax-type-li"> <span></span> 利润表</li>
              <li class="tax-type-li"> <span></span> 现金流量</li>
              <li class="tax-type-li-c">零申报
                <div class="yijianbaoshui-radio-icon" id="cash"></div>
              </li>
            </ul>
          </div>
        </div>

        <div class="classyijianbanshui-btn">
          <div class="classyijianbanshui-btn-item">一键报税</div>
          <div class="classyijianbanshui-btn-item">同步申报种类</div>
          <div class="classyijianbanshui-btn-item">同步申申报表</div>
          <div class="classyijianbanshui-btn-item-complete">申报完成</div>
        </div>
      </div>

    </div>
  </div>

  <script>
    (() => {
      const yiJianBaoShuiBtn = $('#yiJianBaoShuiBtn');
      const yiJianBaoShuiPopup = $('#yiJianBaoShuiPopup');


      // 是否显示一键报税页面
      let isShowBtn = false;
      yiJianBaoShuiBtn.click((e) => {
        if (isShowBtn) {
          yiJianBaoShuiPopup.removeClass('yijianbaoshui-active');
          isShowBtn = !isShowBtn;
          return false;
        }
        yiJianBaoShuiPopup.addClass('yijianbaoshui-active');
        isShowBtn = !isShowBtn;
      })


      let isTax = false;
      $('#tax').click( function(e){
        if(isTax) {
          $(this).removeClass('yijianbaoshui-radio-icon-select');
          isTax = !isTax;
          return false;
        }
        $(this).addClass('yijianbaoshui-radio-icon-select');
        isTax = !isTax;
      })

      let cash = false;
      $('#cash').click( function(e){
        if(cash) {
          $(this).removeClass('yijianbaoshui-radio-icon-select');
          cash = !cash;
          return false;
        }
        $(this).addClass('yijianbaoshui-radio-icon-select');
        cash = !cash;
      })

    })()

  </script>
</body>

</html>
